<template>
  <view class="page-container">
    <view class="header-container">
      <view class="left" @click="toBack"><text class="iconfont icon-back"></text></view>
      <view class="center">活动详情</view>
      <view class="right">
        <!-- <img src="~@/static/active_detail_slices/fenxiang@3x.png" alt=""> -->
      </view>
    </view>
    <view class="main-container">
      <view class="top-container">
        <view class="title">
          <view class="time">2020</view>
          <view class="text">好人好事好景区</view>
        </view>
        <view class="subtitle">抗击疫情无忧出行</view>
      </view>
      <view class="content-container">
        正值高速免费暑期旅游旺季，老君山景区迎来了大量游客，随着游人的增多，景区内的好人好事也不断涌现，景区员工始终坚持以优质、周到、热情的服务标准迎接游客！ 还有许多温暖人心的瞬间在我们美丽的景区内悄悄发生着......
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  methods: {
    toBack() {
      uni.navigateBack({ delta: 1 })
    }
  }
})
</script>
<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-container {
  color: #333333;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right {
  flex-direction: row-reverse;
}

.header-container .right img {
  width: 16px;
  height: 16px;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  width: 100%;
  position: relative;
}

.top-container {
  color: #FFFFFF;
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  z-index: -1;
  overflow: hidden;
  text-align: center;
}

.top-container::after {
  content: "";
  width: 140%;
  height: 180px;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #006b65;
}

.top-container .title {
  padding-top: 15px;
}

.top-container .title .time {
  font-size: 24px;
  font-weight: bold;
}

.top-container .title .text {
  font-size: 24px;
  margin-top: 15px;
}

.top-container .subtitle {
  font-size: 18px;
  padding: 15px;
}

.content-container {
  color: #333333;
  font-size: 14px;
  position: absolute;
  top: 200px;
  left: 15px;
  right: 15px;
}
</style>